var table = layui.table;
var layer = layui.layer;
var $ = layui.jquery;

import Choosee from "./chosee.js";
import { setDivContainer, setOnePiece } from "./ui.js";
export default class UpdateCinema{
    constructor(data){
        this.render()
     this.handle(data)
    }
    render(){
        let template = `
        <form class="layui-form" action="" lay-filter="addForm" style="width: 75%;">
        <div class="layui-form-item">
          <label class="layui-form-label">院线名:</label>
          <div class="layui-input-block">
            <input  type="text" name="cinemasName"  autocomplete="off" placeholder="请输入院线名" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地&nbsp&nbsp&nbsp址:</label>
          <div class="layui-input-block">
            <input type="text" name="cinemasAddr"  autocomplete="off" placeholder="请输入地址" class="layui-input">
         </div>
       </div>
       <div class="layui-form-item">
         <label class="layui-form-label">热&nbsp&nbsp&nbsp线:</label>
         <div class="layui-input-block">
           <input type="text" name="cinemasTel"  autocomplete="off" placeholder="请输入热线" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">官&nbsp&nbsp&nbsp网:</label>
        <div class="layui-input-block">
          <input type="text" name="cinemasUrl"  autocomplete="off" placeholder="请输入官网" class="layui-input">
       </div>
     </div>
     </form>
       <button type="button" class="layui-btn layui-btn-primary layui-border-blue"style="margin-left:40%" >新增放映厅</button>
     <form class="layui-form" action=""style="margin-top:20px;width: 75%;">
          <div class="layui-form-item">
           <label class="layui-form-label">放映厅:</label>
          <div class="layui-input-block">
           <input type="text" name="screenName" lay-verify="title" autocomplete="off"  class="layui-input">
         </div>
         </div>
         <div class="layui-form-item">
           <label class="layui-form-label">座&nbsp&nbsp&nbsp位:</label>
         <div class="layui-input-block" style="display:flex">
           <input type="text" name="sereenSeat" lay-verify="title" autocomplete="off"  class="layui-input">
           <button type="button" class="layui-btn layui-btn-sm layui-btn-normal btn1" style="position:absolute ;top:5px;left:265px"> 预览</button>
         </div>
         </div>
       </form>
    <div type="text/html" id="choosee"></div>
        `
        $("#UpdateCinemaTemplate").html(template)
    }
    handle(data){
         let form = layui.form 
        layer.open({
            title: "编辑",
            type: 1,
            area: ["500px", "500px"],
            content:  $("#UpdateCinemaTemplate").html(),
            btn: ["修改", "取消"],
            success: function (layero, index) {
              console.log(data);
              $("input[name='cinemasName']").val(data.cinemasName);
              $("input[name='cinemasAddr']").val(data.cinemasAddr);
              $("input[name='cinemasTel']").val(data.cinemasTel);
              $("input[name='cinemasUrl']").val(data.cinemasUrl);
              $("input[name='screenName']").val(data.screen.screenName[0][0]);
              $("input[name='sereenSeat']").val(data.screen.sereenSeat)
                let btn = document.querySelector(".btn1")
                console.log(btn);
                  btn.onclick=()=>{
                 /**
                  * 0.未选座
                  * 1.已选座
                  */
                 let txt = $(btn).prev("input:text").val()
                  let content =eval(txt); //将二维数组字符串转换为二维数组
                  console.log(content);
                  //仅用于记录座位表中的内容（已选座，未选座）
                let white = 0;
                 let red = 1;
                 /* 总列数 */
                 let colNumber = content[0].length;
                 /* 总行数 */
                 let rowNumber = content.length;
                 let pieceWidth = 45; //每一个小块的宽度
                 let pieceHeight = 45; //每一个小块的高度
                 let choosee = $("#choosee")
                 console.log(choosee);
                 setDivContainer(
                   choosee,
                     pieceWidth,
                     pieceHeight,
                     colNumber,
                     rowNumber
                   );
                   function setContent(choosee, colNumber, rowNumber) {
                   
                     for (let row = 0; row < rowNumber; row++) {
                       for (let col = 0; col < colNumber; col++) {
                         let a = setOnePiece(choosee,row, col,content,pieceWidth,pieceHeight,red,white);
                         $(choosee).append(a)
                         // choose.appendChild(a);
                       };
                     }
                     return $(choosee)
                   }
                   setContent(choosee, colNumber, rowNumber)
                    new Choosee()
                  }
                 
  
            },

            yes: function () {
              //注意下面使用的map方法是jquery的map方法
              //获取到的还是jquery的类型，所以最后需要get()转换为原生的数组对象
              $.ajax({
                url: "/api/cinema/update/" + data._id,
                type: "put",
                contentType: "application/json",
                data: JSON.stringify({
                  cinemasName: $("input[name='cinemasName']").val(),
                  cinemasAddr: $("input[name='cinemasAddr']").val(),
                  cinemasTel: $("input[name='cinemasTel']").val(),
                  cinemasUrl: $("input[name='cinemasUrl']").val(),
                  screen:{
                    screenName:[[$("input[name='screenName']").val()],[$("input[name='screenName']").val()]] ,
                    sereenSeat:$("input[name='sereenSeat']").val()
                  }
                 
                }),
                success: function (res) {
                  if (res.acknowledged === true) {
                    // table.reloadData("myCinema", {});
                    layer.closeAll();
                    table.reloadData("myCinema",{})
                    // form.render();
                    layer.msg("修改成功!");
                  }
                },
              });
            },
        })
    }
}